import React, { Component } from 'react';
import { View, Image, Picker } from '@tarojs/components';
import { AtButton, AtCheckbox, AtForm, AtInput, AtInputNumber, AtList, AtListItem, AtNavBar } from "taro-ui";
import Taro from '@tarojs/taro';
import "./addmeetingroom.less";
import config from '../../config.json'

function getCurrentPageUrlWithArgs(){
    var pages = Taro.getCurrentPages()    //获取加载的页面
    var currentPage = pages[pages.length-1]    //获取当前页面的对象
    var url = currentPage.route    //当前页面url
    var options = currentPage.options    //如果要获取url中所带的参数可以查看options
    
    return options
}

interface meetroomData {
    area: number
    mid: number
    name: string
    note: string
    projector: number
    wifi: number
}

export default class Index extends Component<any, any> {
    constructor(props) {
        super(props);
        this.state = {
            name: "",
            area: 0,
            projectorSelector: ["可用", "不可用"],
            projector: "可用",
            wifi: "可用",
            wifiSelector: ["可用", "不可用"],
            note: ""
        }
    }

    componentWillMount() {
        
    }

    componentDidMount() { }

    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }

    handleChange(key, value) {
        if (key === "projector" || key === "wifi") {
            let newState = {};
            newState[key] = this.state.projectorSelector[value.detail.value];
            this.setState(newState)
        } else if (key === "area") {
            if (value <= 1000) {
                let newState = {};
                newState[key] = value;
                this.setState(newState)
            }
        } else {
            let newState = {};
            newState[key] = value;
            this.setState(newState)
        }
    }

    handleSubmit() {
        Taro.showLoading({title: "正在提交"});
        let requestData = {
            name: this.state.name,
            note: this.state.note,
            area: this.state.area,
            projector: this.state.projector === "可用"?1:0,
            wifi: this.state.wifi === "可用"?1:0,
        }
        Taro.getStorage({
            key: "token",
            success: (res) => {
                let token = res.data;
                Taro.request({
                    url: config.domainName + "/meetroom/insert",
                    data: requestData,
                    method: "POST",
                    dataType: "json",
                    header: {
                        "token": token
                    },
                    success: (res) => {
                        Taro.hideLoading();
                        let response = res.data;
                        if(!response.code) {
                            Taro.showToast({title: response.msg});
                            setTimeout(() => {
                                Taro.setStorage({
                                    key: "refresh",
                                    data: "1",
                                    success: () => {
                                        Taro.navigateBack();
                                    }
                                })
                            }, 1000)
                            
                        } else {
                            Taro.showToast({title: response.msg, icon: "error" as any})
                        }
                    }, 
                    fail: (res) => {
                        Taro.hideLoading();
                        Taro.showToast({title: res.errMsg});
                    }
                })
            }
        })
    }

    render() {
        return (
            <View>
                 <AtNavBar
                    onClickLeftIcon={() => { Taro.navigateBack() }}
                    color='#000'
                    title='添加会议室'
                    leftIconType="chevron-left"
                />
                <View className="module-title">添加会议室</View>
                <AtForm>
                    <AtInput
                        name='name'
                        title='名称'
                        type='text'
                        placeholder='输入会议室名称'
                        value={this.state.name}
                        onChange={this.handleChange.bind(this, 'name')}
                    />
                    <View style={{
                        display: "flex",
                        alignItems: "center"

                    }}>
                        <View style={{
                            padding: "0.3rem 0.6rem",
                            marginRight: "2rem",
                            fontSize: "0.7rem"
                        }}>面积</View>
                        <AtInputNumber
                            max={1000}
                            type="number"
                            value={this.state.area}
                            onChange={this.handleChange.bind(this, 'area')}
                        />
                    </View>
                    <Picker
                        style={{ paddingLeft: 2 }}
                        mode='selector'
                        range={this.state.projectorSelector}
                        onChange={this.handleChange.bind(this, "projector")}
                    >
                        <AtList>
                            <AtListItem
                                title='投影仪状态'
                                extraText={this.state.projector}
                            />
                        </AtList>
                    </Picker>
                    <Picker
                        style={{ paddingLeft: 2 }}
                        mode='selector'
                        range={this.state.wifiSelector}
                        onChange={this.handleChange.bind(this, "wifi")}
                    >
                        <AtList>
                            <AtListItem
                                title='网络状态'
                                extraText={this.state.wifi}
                            />
                        </AtList>
                    </Picker>

                    <AtInput
                        name='note'
                        title='备注'
                        type='text'
                        placeholder='输入备注'
                        value={this.state.note}
                        onChange={this.handleChange.bind(this, 'note')}
                    />
                    <View style={{ margin: "50rpx 10rpx" }}>
                        <AtButton
                            type="primary"
                            onClick={this.handleSubmit.bind(this)}
                        >
                            确认提交
                        </AtButton>
                    </View>

                </AtForm>
            </View>
        )
    }
}
